<template>
  <div class="rightbottomcontainer">
    <dir class="bottom-left">
      <div id="main" style="width: 800px; height: 300px"></div>
    </dir>
    <dir class="bottom-right">
      <div class="bottom-div">
        <a-button type="primary" @click="Previousstep">上一步</a-button>
      </div>
      <div class="bottom-div"><a-button type="primary">下一步</a-button></div>
      <div class="bottom-div"><a-button type="primary">退出预览</a-button></div>
      <div class="bottom-div"><a-button type="primary">完成指挥</a-button></div>
    </dir>
  </div>
</template>
<script>
import { defineComponent } from "vue";
import * as echarts from "echarts";
export default defineComponent({
  name: "RightMenu",
  components: {},
  mounted() {
    this.initMap();
  },
  methods: {
    Previousstep() {},
    initMap() {
      this.myChart = echarts.init(document.getElementById("main"));
      var checkName = ""; //点击柱子的名字
      var option = {
        series: [
          {
            itemStyle: {
              normal: {
                label: { show: true },
                color: function (params) {
                  //通过判断选中的名字改变柱子的颜色样式
                  if (checkName === params.name) {
                    return "#F1AC58";
                  } else {
                    return "#617EDF";
                  }
                },
              },
            },
            type: "graph",
            layout: "none",
            symbolSize: 100,
            roam: true,
            // color: '#617EDF',
            label: {
              show: true,
              fontSize: 12,
              color: "#FFF",
              //backgroundColor:'white'
            },
            symbol: "Rect",
            edgeSymbol: ["circle", "arrow"],
            edgeSymbolSize: [4, 10],
            symbolSize: [100, 40],
            // edgeLabel: {
            //   fontSize: 25,
            //   show: true,
            //   position: 'middle'
            // },
            data: [
              {
                name: "事故发现",
                x: 0,
                y: 0,
              },
              {
                name: "事故确认",
                x: 5,
                y: 0,
              },
              {
                name: "信息上报",
                x: 10,
                y: 0,
              },
              {
                name: "启动现场处置预案",
                x: 15,
                y: 0,
              },
              {
                name: "启动公司预案",
                x: 20,
                y: 0,
              },
              {
                name: "指挥中心成立",
                x: 25,
                y: 0,
              },
              {
                name: "应急救援队伍集结",
                x: 30,
                y: 0,
              },
              {
                name: "测试0",
                x: 30,
                y: 5,
                itemStyle: {
                  opacity: 0,
                },
              },
              {
                name: "测试1",
                x: 25,
                y: 5,
                itemStyle: {
                  opacity: 0,
                },
              },
              {
                name: "处理完成",
                x: 15,
                y: 5,
              },
            ],
            links: [
              {
                source: "事故发现",
                target: "事故确认",
              },
              {
                source: "事故确认",
                target: "信息上报",
              },
              {
                source: "信息上报",
                target: "启动现场处置预案",
              },
              {
                source: "启动现场处置预案",
                target: "启动公司预案",
              },
              {
                source: "启动现场处置预案",
                target: "处理完成",
              },
              {
                source: "启动公司预案",
                target: "指挥中心成立",
              },
              {
                source: "指挥中心成立",
                target: "应急救援队伍集结",
              },
              {
                source: "应急救援队伍集结",
                target: "测试0",
              },
              {
                source: "测试0",
                target: "测试1",
              },
              {
                source: "测试1",
                target: "处理完成",
              },
            ],
            lineStyle: {
              color: "#ffffff",
              // curveness: 0.2,
              width: 1,
            },
          },
        ],
      };
      this.myChart.setOption(option);
      // myChart.dispatchAction({
      //   type: action,
      //   seriesIndex: 0,
      //   name: names
      // })

      // myChart.on('click', function (params) {
      //   //点击的柱子的名称
      //   checkName = params.name
      //   //柱形图重构
      //   myChart.setOption(option)
      // })
    },
  },
});
</script>
<style lang="scss" scoped>
.rightbottomcontainer {
  display: flex;
}

.bottom-left {
  width: 800px;
  height: 300px;
}

.bottom-right {
  width: 200px;
  height: 300px;

  .bottom-div {
    margin: 10px;
  }

  .bottom-div .ant-btn {
    width: 100px !important;
  }
}
</style>
